<template>
    <div class="wrapper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img v-lazy="'http://qn.diyeetech.com/18-12-19/48246636.jpg'" alt="" />
                </div>
                <div class="swiper-slide">
                    <img v-lazy="'http://qn.diyeetech.com/18-12-3/19823858.jpg'" alt="" />
                </div>
                <div class="swiper-slide">
                    <img v-lazy="'http://qn.diyeetech.com/18-10-31/40039076.jpg'" alt="" />
                </div>
            </div>
        </div>

        <div class="itemList">
            <div class="Item">
                <div class="wrappItem">
                    <img src="https://m.diyeetech.com/static/home/type4.png" alt="">
                </div>
                <div>
                    <div class="title">新品推荐</div>
                </div>
            </div>
            <div class="Item">
                <div class="wrappItem">
                    <img src="https://m.diyeetech.com/static/home/type1.png" alt="">
                </div>
                <div>
                    <div class="title">当季热卖</div>
                </div>
            </div>
            <div class="Item" @click="$router.push('/design/upload')">
                <div class="wrappItem">
                    <img src="https://m.diyeetech.com/static/home/type2.png" alt="">
                </div>
                <div>
                    <div class="title">来图定制</div>
                </div>
            </div>
            <div class="Item">
                <div class="wrappItem">
                    <img src="https://m.diyeetech.com/static/home/type3.png" alt="">
                </div>
                <div>
                    <div class="title">设计加盟</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 30,
            });

        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        padding-bottom: 20px;
    }

    .swiper-container {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    .swiper-slide {
        background: #fff;
        width: 80%;
        img {
            height: px2rem(125*2);
            max-width: 100%;
        }
    }

    .itemList {
        margin-top: 20px;
        padding-left: px2rem(40);
        padding-right: px2rem(40);
        display: flex;
        justify-content: space-between;
    }

    .Item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .wrappItem {
            width: px2rem(43*2);
            height: px2rem(43*2);
            img {
                max-height: 100%;
                width: 100%;
            }
        }
        .title {
            margin-top: 5px;
            font-weight: 600;
            font-size: px2rem(20);
            color: #777777;
        }
    }
</style>